<template>
    <div>
      <el-dialog :title="dialogProps.title" :visible.sync="dialogProps.visible" width="560px"
          @open="handleDialogOpen()" v-loading="loading">
          <el-tabs type="border-card">
            <el-tab-pane label="基本信息">
              <h2>信息</h2>
              <p>档案号：{{this.mealModel.filenumber}}</p>
              <p>姓名：{{this.mealModel.name}}</p>
              <p v-if="this.mealModel.sex==1">性别：男</p>
              <p v-if="this.mealModel.sex==2">性别：女</p>
              <p>年龄：{{this.mealModel.age}}</p>
              <p>疾病史：{{this.diseaseLibraryNames}}</p>
              <p>遗传史：
                {{this.mealModel.tMemberMedicalhistory.previousHistory}}
                {{this.mealModel.tMemberMedicalhistory.familyHistory}}
                {{this.mealModel.tMemberMedicalhistory.allergicHistory}}
                {{this.mealModel.tMemberMedicalhistory.medicalHistory}}
                {{this.mealModel.tMemberMedicalhistory.chronicDisease}}
              </p>
            </el-tab-pane>
            <el-tab-pane label="体检信息">
              <el-table  :data="ktm"  style="width: 100%">
                <el-table-column prop="filenumber" label="档案号" width="180">
                </el-table-column>
                <el-table-column prop="regtime | dateFormat" label="体检日期" width="180">
                  <template slot-scope="scope">
                    {{scope.row.regtime | dateFormat}}
                  </template>
                </el-table-column>
                <el-table-column label="查看体检报告">
                  <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <!-- <el-tab-pane label="评估结果">角色管理</el-tab-pane> -->
            <el-tab-pane label="确认分类">
              <h2>确认分类</h2>
              <el-checkbox-group v-model="checkListtrue">
                <el-checkbox v-for="(item,index) in checkList" :key="index" :label="item.id">{{item.name}}</el-checkbox>
              </el-checkbox-group>
              <h2>健康管理师</h2>
                 <el-select v-model="selectListtrue" placeholder="请选择">
                    <el-option v-for="(item,index) in selectList" :key="index" :label="item.name" :value="item.value">
                    </el-option>
                  </el-select><br><br><br>
              <el-button type="primary" @click="submitBtn" v-if="statu==0">确认分类</el-button>
              <el-button type="primary" v-if="statu==1" disabled>确认分类</el-button>
              <el-button @click="closeBtn">取消</el-button>
            </el-tab-pane>
          </el-tabs>
      </el-dialog>

      <el-dialog title="体检报告" :visible.sync="dialogProps.checkReport" width="560px" v-loading="loading">
        <el-table  :data="setmeal"  style="width: 100%">
                <el-table-column prop="id" label="编号" width="180">
                </el-table-column>
                <el-table-column prop="name" label="名称" width="180">
                </el-table-column>
                <el-table-column prop="heathname" label="执行人">
                </el-table-column>
              </el-table>
      </el-dialog>
    </div>
</template>

<script>
import {getSetmealById,getCheckListInit,getSelectListInit,updateDiseaseLibrary} from '@/api/junM/interposeClassify'
export default {
  data() {
    return {
      loading: false,
      ktm:[],
      dialogProps: {
        visible: false,
        action: '',
        title: '',
        checkReport:false
      },
      mealModel:{
        tMemberMedicalhistory:{}
      },
      diseaseLibraryNames:'',
      setmeal:[],
      checkList:[],
      checkListtrue:[],
      selectList:[],
      selectListtrue:'',
      statu:''
    }
  },
  methods:{
    checkListInit(){
      this.loading=true
      getCheckListInit()
      .then(response=>{
        // for(var i=0;i<response.data.length;i++){
          this.checkList=response.data
        // }
        this.loading=false
      })
      .catch(error => {
        this.outputError(error)
      })
    },
    selectListInit(){
      this.loading=true
      getSelectListInit()
      .then(response=>{
        for(var i=0;i<response.data.length;i++){
          this.selectList.push({
            name:response.data[i].healthMgrName,
            value:response.data[i].healthMgrId
          })
        }
        this.loading=false
      })
      .catch(error => {
        this.outputError(error)
      })
    },
    submitBtn(){
      this.loading=true
      var id=this.mealModel.id
      console.log(id+","+this.checkListtrue+","+this.selectListtrue)
      updateDiseaseLibrary(id,this.checkListtrue,this.selectListtrue)
      .then(()=>{
        this.dialogProps.visible=false
        //刷新表格
        this.$emit("save-finished")
        this.loading=false
      })
      this.dialogProps.visible=false
      this.loading=false
    },
    closeBtn(){
      this.dialogProps.visible=false
    },
    handleClick(row){
      this.loading=true
      this.dialogProps.checkReport=true
      this.setmeal.length=0
      getSetmealById(row.id)
      .then(response=>{
        this.setmeal.push(response.data)
        this.selectListtrue.push({
          name:response.data.heathname,
          value:response.data.heathnameId
        })
      })
      this.loading=false
    },
    outputError(error) {
      console.log(error.response ? error.response : error.message)
      this.loading = false
      this.$message({
        showClose: true,
        message: '出错了，请按F12查看浏览器日志。',
        type: 'error'
      })
    }
  },
  filters:{
    dateFormat:function(data){
          var dt=new Date(data)
          var n=dt.getFullYear();
          var y=(dt.getMonth()+1).toString().padStart(2,"0");//补零操作
          var r=(dt.getDate()).toString().padStart(2,"0");
          dt.getHours();
          dt.getMinutes();
          dt.getSeconds();
          return n+"-"+y+"-"+r;
      }
  },
  mounted: function() {
    this.$nextTick(() => {
      this.$on('openEditRoleDialog', function(role) {
        this.mealModel = role
        this.ktm.length=0
        this.checkListtrue.length=0
        this.ktm.push(role)
        for(var i=0;i<role.tDiseaseLibrarys.length;i++){
          this.checkListtrue.push(role.tDiseaseLibrarys[i].id)
        }
        var names=""
        for(var i=0;i<this.mealModel.tDiseaseLibrarys.length;i++){
          names+=this.mealModel.tDiseaseLibrarys[i].name+","
        }
        this.diseaseLibraryNames=names.substr(0,names.length-1)
        this.selectListtrue=this.$store.state.healthMgrName
        this.statu=this.$store.state.statu
        this.dialogProps.action = 'edit'
        this.dialogProps.title = '人群分类'
        this.dialogProps.visible = true
      })
      this.$on('openAddRoleDialog', function() {
        this.dialogProps.action = 'add'
        this.dialogProps.title = '添加膳食库'
        this.mealModel = {
          locked: false
        }
        this.dialogProps.visible = true
      })
    })
  },
  created(){
    this.checkListInit()
    this.selectListInit()
  }
}
</script>

<style>

</style>
